<template>
  <div class="tw-libname">
    <div class="menu-wrap" :style="{height: height, backgroundColor: bgColor}">
      <div
      v-for="item in menuList"
      :key="item.value"
      class="menu-wrap-item tw-left">
        <h4 :style="{color: titleColor,fontSize: titleSize, fontWeight: fontBold ? 'bold' : 'normal'}" class="menu-wrap-title">{{item.name}}</h4>
        <div v-if="item.list && item.list.length > 0">
          <ul>
            <li
            v-for="itm in item.list"
            class="tw-menu-third"
            :key="itm.id">
              <p class="tw-menu-third-item">{{itm.value}}</p>
              <div v-if="itm.list && itm.list.length > 0">
                <p v-for="it in itm.list"
                :key="it.id"
                class="tw-menu-right"
                @click="chooseItem(item, itm.id)">
                  <span>{{it.value}}</span>
                </p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div style="clear: both;"></div>
    </div>
  </div>
</template>

<script>
import props from './props'

export default {
  name: 'lib-name',

  props,
  methods: {
    setStyle () {
      const style = `
      .menu-wrap-item {
        color: ${this.color};
        width: 23%;
      }
      .tw-menu-third {
        color: ${this.thirdColor};
        font-size: ${this.thirdFontSize};
        margin-top: 10px;
      }
      .tw-menu-third-item {
        padding: 4px 0 4px 8px;
      }
      .tw-menu-right {
        display: block;
        text-align: left;
        line-height: 24px;
        font-size: ${this.chooseSize};
        padding: 4px 0 4px 8px;
        box-sizing: border-box;
        cursor: pointer;
        color: ${this.color};
      }
      .menu-wrap-item .tw-menu-right:hover {
        outline: 0;
        background-color: ${this.chooseBgColor};
        color: ${this.chooseColor};
      }
      `
      const styleEl = document.createElement('style')
      styleEl.innerText = style.replace(/\n/g, '')

      document.head.appendChild(styleEl)
    },
    // 点击事件
    chooseItem (item, id) {
      this.$emit('chooseItem', item)
      this.chooseValue = id
    }
  },
  computed: {
    style () {
      return {
        color: this.color,
        bgColor: this.bgColor,
        chooseBgColor: this.chooseBgColor,
        chooseColor: this.chooseColor,
        chooseSize: this.chooseSize,
        titleSize: this.titleSize,
        fontBold: this.fontBold,
        titleColor: this.titleColor,
        overflowScoll: this.overflowScoll,
        height: this.height,
        thirdColor: this.thirdColor,
        thirdFontSize: this.thirdFontSize
      }
    }
  },
  mounted () {
    this.setStyle()
  },

  watch: {
    style: {
      deep: true,
      handler () {
        this.setStyle()
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
